<template>
  <div class="cateRight">
    <div class="sortItem" v-for="item in cateInfo" :key="item.item_id">
      <div class="sortImg">
        <img :src="item.image" />
      </div>
      <div class="sortTitle">{{ item.title }}</div>
      <div class="sortButton">
        <div class="sortPrice">￥{{ item.price }}</div>
        <div class="sortNum">
          <div class="goShopCart" @click="item.isShelf++" v-if="item.isShelf == 0">
            加入购物车
          </div>
          <template v-else>
            <div class="reduce" @click="item.isShelf == 0 ? 0 : item.isShelf--">-</div>
            <div class="num">{{ item.isShelf }}</div>
            <div class="add" @click="item.isShelf++">+</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CateRight",
  props: {
    cateInfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style>
.cateRight {
  width: 70%;
  margin:0 5px 0 5px ;
  overflow: scroll;
}

.sortItem {
  margin-bottom: 20px;
}
.sortImg {
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.sortImg img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.sortTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.25rem;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sortButton {
  height: 30px;
  line-height: 30px;
  display: flex;
  font-size: 1.4rem;
}
.sortPrice {
  flex: 1;
  color: #ff5777;
}
.goShopCart {
  color: #fff;
  background-color: #ff5777;
  height: 30px;
  border: none;
  border-radius: 15px;
  padding: 0 15px;
  outline: none;
  font-size: 1rem;
}
.reduce {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #ff5777;
  background-color: #fff;
  color: #ff5777;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  text-align: center;
  outline: none;
  font-size: 1.25rem;
}
.num {
  display: inline-block;
  font-size: 1.25rem;
  padding: 0 15px;
}
.add {
  display: inline-block;
  color: #fff;
  background-color: #ff5777;
  height: 30px;
  width: 30px;
  border: none;
  border-radius: 15px;
  text-align: center;
  outline: none;
  font-size: 1.25rem;
}
</style>